<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库区管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">库区管理</div>
            
            <!-- 库区概览 -->
            <div class="warehouse-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card total">
                            <div class="overview-item">
                                <div class="overview-number">{{ warehouseStats.totalZones }}</div>
                                <div class="overview-label">总库区数</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card temp">
                            <div class="overview-item">
                                <div class="overview-number">{{ warehouseStats.tempZones }}</div>
                                <div class="overview-label">温区数量</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card capacity">
                            <div class="overview-item">
                                <div class="overview-number">{{ warehouseStats.totalCapacity }}</div>
                                <div class="overview-label">总容量(万m³)</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card utilization">
                            <div class="overview-item">
                                <div class="overview-number">{{ warehouseStats.utilization }}%</div>
                                <div class="overview-label">库区利用率</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="分区规划" name="zone-planning">
                    <div class="query-section">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-input v-model="zoneQuery.zoneName" placeholder="库区名称" clearable></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="zoneQuery.zoneType" placeholder="库区类型" clearable>
                                    <el-option label="冷冻区" value="frozen"></el-option>
                                    <el-option label="冷藏区" value="refrigerated"></el-option>
                                    <el-option label="常温区" value="normal"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" @click="searchZones">查询</el-button>
                                <el-button @click="resetZoneQuery">重置</el-button>
                                <el-button type="success" @click="addZone">新增库区</el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <el-table :data="zoneData" border style="width: 100%">
                        <el-table-column prop="zoneName" label="库区名称" width="150"></el-table-column>
                        <el-table-column prop="zoneType" label="库区类型" width="120">
                            <template slot-scope="scope">
                                <el-tag :type="getZoneType(scope.row.zoneType)">
                                    {{ getZoneText(scope.row.zoneType) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="area" label="面积(m²)" width="120"></el-table-column>
                        <el-table-column prop="capacity" label="容量(m³)" width="120"></el-table-column>
                        <el-table-column prop="currentUsage" label="当前使用率" width="120">
                            <template slot-scope="scope">
                                <el-progress :percentage="scope.row.currentUsage" :color="getUsageColor(scope.row.currentUsage)"></el-progress>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tempRange" label="温度范围" width="120"></el-table-column>
                        <el-table-column prop="status" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status === '运行中' ? 'success' : 'warning'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewZoneDetail(scope.row)">详情</el-button>
                                <el-button size="mini" type="primary" @click="editZone(scope.row)">编辑</el-button>
                                <el-button size="mini" type="warning" @click="manageLayout(scope.row)">布局</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="温区设置" name="temp-zones">
                    <div class="temp-zones-panel">
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-card header="温区分布图">
                                    <div class="temp-map">
                                        <div id="temperature-map" style="height: 300px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                            <span style="color: #999;">温区分布可视化图</span>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card header="温区设置">
                                    <div class="temp-settings">
                                        <div v-for="tempZone in tempZones" :key="tempZone.id" class="temp-zone-item">
                                            <div class="zone-header">
                                                <span class="zone-name">{{ tempZone.name }}</span>
                                                <el-tag :color="tempZone.color" size="mini">{{ tempZone.tempRange }}</el-tag>
                                            </div>
                                            <div class="zone-details">
                                                <p>面积：{{ tempZone.area }}m²</p>
                                                <p>设备：{{ tempZone.equipment }}</p>
                                                <p>状态：{{ tempZone.status }}</p>
                                            </div>
                                            <div class="zone-actions">
                                                <el-button size="mini" @click="adjustTemp(tempZone)">调节</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="货架布局" name="shelf-layout">
                    <div class="shelf-layout-panel">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-card header="货架布局设计">
                                    <div class="layout-designer">
                                        <div id="shelf-designer" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                            <span style="color: #999;">货架布局设计器</span>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6">
                                <el-card header="货架管理">
                                    <div class="shelf-management">
                                        <el-button type="primary" size="mini" @click="addShelf">添加货架</el-button>
                                        <el-button type="success" size="mini" @click="optimizeLayout">布局优化</el-button>
                                        <el-button type="warning" size="mini" @click="saveLayout">保存布局</el-button>
                                        
                                        <div class="shelf-stats">
                                            <h4>货架统计</h4>
                                            <p>总货架：{{ shelfStats.total }}个</p>
                                            <p>使用中：{{ shelfStats.inUse }}个</p>
                                            <p>空闲：{{ shelfStats.idle }}个</p>
                                            <p>平均利用率：{{ shelfStats.avgUtilization }}%</p>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="shelf-list">
                        <el-card header="货架明细">
                            <el-table :data="shelfData" border style="width: 100%">
                                <el-table-column prop="shelfNo" label="货架编号" width="120"></el-table-column>
                                <el-table-column prop="zone" label="所属库区" width="120"></el-table-column>
                                <el-table-column prop="type" label="货架类型" width="120"></el-table-column>
                                <el-table-column prop="capacity" label="容量" width="100"></el-table-column>
                                <el-table-column prop="currentLoad" label="当前载重" width="120"></el-table-column>
                                <el-table-column prop="utilization" label="利用率" width="100">
                                    <template slot-scope="scope">
                                        <span :style="{color: scope.row.utilization > 80 ? '#67C23A' : scope.row.utilization > 60 ? '#E6A23C' : '#F56C6C'}">
                                            {{ scope.row.utilization }}%
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="viewShelfDetail(scope.row)">详情</el-button>
                                        <el-button size="mini" type="primary" @click="adjustShelf(scope.row)">调整</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'zone-planning',
                    warehouseStats: {
                        totalZones: 12,
                        tempZones: 8,
                        totalCapacity: 15.6,
                        utilization: 78
                    },
                    zoneQuery: {
                        zoneName: '',
                        zoneType: ''
                    },
                    zoneData: [
                        {
                            zoneName: 'A区冷冻库',
                            zoneType: 'frozen',
                            area: 1200,
                            capacity: 2400,
                            currentUsage: 85,
                            tempRange: '-18°C~-25°C',
                            status: '运行中'
                        },
                        {
                            zoneName: 'B区冷藏库',
                            zoneType: 'refrigerated',
                            area: 1500,
                            capacity: 3000,
                            currentUsage: 72,
                            tempRange: '0°C~4°C',
                            status: '运行中'
                        }
                    ],
                    tempZones: [
                        {
                            id: 1,
                            name: '冷冻区A',
                            tempRange: '-18°C~-25°C',
                            color: '#409EFF',
                            area: 1200,
                            equipment: '制冷机组A1',
                            status: '正常'
                        },
                        {
                            id: 2,
                            name: '冷藏区B',
                            tempRange: '0°C~4°C',
                            color: '#67C23A',
                            area: 1500,
                            equipment: '制冷机组B1',
                            status: '正常'
                        }
                    ],
                    shelfStats: {
                        total: 156,
                        inUse: 132,
                        idle: 24,
                        avgUtilization: 78
                    },
                    shelfData: [
                        {
                            shelfNo: 'A-001',
                            zone: 'A区冷冻库',
                            type: '高位货架',
                            capacity: '500kg',
                            currentLoad: '425kg',
                            utilization: 85
                        },
                        {
                            shelfNo: 'B-001',
                            zone: 'B区冷藏库',
                            type: '中位货架',
                            capacity: '300kg',
                            currentLoad: '180kg',
                            utilization: 60
                        }
                    ]
                }
            },
            methods: {
                getZoneType(type) {
                    const typeMap = {
                        'frozen': 'primary',
                        'refrigerated': 'success',
                        'normal': 'info'
                    };
                    return typeMap[type] || 'info';
                },
                getZoneText(type) {
                    const textMap = {
                        'frozen': '冷冻区',
                        'refrigerated': '冷藏区',
                        'normal': '常温区'
                    };
                    return textMap[type] || '未知';
                },
                getUsageColor(usage) {
                    if (usage > 80) return '#F56C6C';
                    if (usage > 60) return '#E6A23C';
                    return '#67C23A';
                },
                searchZones() {
                    this.$message.success('查询完成');
                },
                resetZoneQuery() {
                    this.zoneQuery = { zoneName: '', zoneType: '' };
                },
                addZone() {
                    this.$message.info('新增库区功能开发中');
                },
                viewZoneDetail(row) {
                    this.$message.info('查看详情功能开发中');
                },
                editZone(row) {
                    this.$message.info('编辑库区功能开发中');
                },
                manageLayout(row) {
                    this.$message.info('布局管理功能开发中');
                },
                adjustTemp(tempZone) {
                    this.$message.info('温度调节功能开发中');
                },
                addShelf() {
                    this.$message.info('添加货架功能开发中');
                },
                optimizeLayout() {
                    this.$message.success('布局优化建议已生成');
                },
                saveLayout() {
                    this.$message.success('布局已保存');
                },
                viewShelfDetail(row) {
                    this.$message.info('查看详情功能开发中');
                },
                adjustShelf(row) {
                    this.$message.info('调整货架功能开发中');
                }
            }
        });
    </script>

    <style scoped>
        .warehouse-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.temp {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.capacity {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.utilization {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .temp-zones-panel, .shelf-layout-panel {
            margin-bottom: 20px;
        }
        
        .temp-map, .layout-designer {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .temp-settings {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .temp-zone-item {
            padding: 15px;
            border: 1px solid #eee;
            margin-bottom: 10px;
            border-radius: 4px;
            background: #f9f9f9;
        }
        
        .zone-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .zone-name {
            font-weight: bold;
            color: #409EFF;
        }
        
        .zone-details p {
            margin: 5px 0;
            color: #666;
            font-size: 12px;
        }
        
        .zone-actions {
            text-align: right;
            margin-top: 10px;
        }
        
        .shelf-management {
            text-align: center;
        }
        
        .shelf-management .el-button {
            margin: 5px;
            width: 100px;
        }
        
        .shelf-stats {
            margin-top: 20px;
            text-align: left;
        }
        
        .shelf-stats h4 {
            color: #409EFF;
            margin-bottom: 10px;
            border-bottom: 1px solid #409EFF;
            padding-bottom: 5px;
        }
        
        .shelf-stats p {
            margin: 8px 0;
            color: #666;
        }
        
        .shelf-list {
            margin-top: 20px;
        }
    </style>
</body>
</html>